/* 阴影效果 */
.box1 {
  margin: 2rem;
  border: 1px solid #999;
  /*
  box-shadow 盒模型的阴影
  参数1颜色，参数2x轴距离，参数3y轴距离，参数4z轴距离
  xy的距离可以是负数，发方向的投影
  z轴其实外发光，一般来说阴影和发光不会同时存在
  */
  box-shadow: #999 0.6rem 0.4rem 0px;
}

/* 外发光 */
.box2 {
  margin: 2rem;
  border: 1px solid #ff0000;

  box-shadow: #ff0000 0px 0px 0rem;
  transition: box-shadow 0.5s;
}

.box2:hover {
  box-shadow: #ff0000 0px 0px 1rem;
}

/* 文字效果 */
.box3 {
  margin: 1rem;
  /*
  文字阴影的参数的数量和语义和盒模型的一样 
   */
  text-shadow: #999 0.4rem 0.4rem 0px;
}

.box4 {
  margin: 1rem;
  text-shadow: #00ffff 0px 0px 1rem;
}
